<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机名字</title>
    <style>
        .box{
            width: 400px;
            height: 40px;
            border: 1px solid black;  
            margin: 40px auto;
            display: flex;
        }
        .box span{
            width: 70px;
        }
        .box .title{
            width: 100%;
            height: 40px; 
        }
        .btn{
            width: 100%;
        }
        .btn .bb{
            width: 400px;
            margin: 0 auto;
        }
        .btn button{
            width: 40px;
            height: 25px;
            margin-left: 90px;
        }
      
    </style>
</head>
<body>
    <div class="box">
        <span class="str">名 字：</span>
        <div class="title">1</div>   
    </div>
    <div class="btn">
        <div class="bb">
            <button class="start">tart</button>
            <button class="end">end</button>
        </div>
    </div>

    <script>
        const list = ['林朵朵','李槿','云天河','梦璃']
        const title = document.querySelector('.title')
        // const start = document.querySelector('.start')
        // const end = document.querySelector('.end')
        const btn = document.querySelector('.bb')

        let iv = 0
        let redex = 0

        btn.addEventListener('click',function(event){
            if (event.target.className == 'start'){
                if(list.length == 1){
                     title.innerHTML = list[0]
                     Array.from(btn.children).forEach(child => {
                        child.disabled = true
                     })
                     return
                }

                iv = setInterval(function(){
                    redex = getRedex()
                    title.innerHTML = list[redex]
                },50)                
            }else{
                 clearInterval(iv)
                 list.splice(redex,1)
            }
        })

        function getRedex(){
            let redex = Math.floor(Math.random() * list.length)
            return redex
        }
    </script>
</body>
</html>